<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>hello</title>
</head>
<body>
	<!-- 准备好容器 -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script src="../lib/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作dom -->
	<script src="../lib/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script src="../lib/babel.min.js"></script>

	<script type="text/babel">
    /*
      一定注意去人：【js语句（代码）】与【js表达式】
        1.表达式：一个表达式会产生一个值，可以放在任何需要值的地方
          例如：1+1、2*3、条件表达式、函数调用、对象、数组、字符串、数字等
          用const = 在前面接，能接到值就是一个表达式。
          a、a+b、demo(1)、arr.map()、function test(){}
        2.语句（代码）：
          如：if(){}、for(){}、switch(){case:xxx}
    */

    // 模拟数据
    const data = ["Angular", "React", "Vue"]
		
    // 1.创建虚拟DOM
		const VDOM = (
      <>
        <h1>前端js框架列表</h1>
        <ul>
          {
            data.map(item => {
              return <li key={item}>{item}</li>
            })
          }
        </ul>
      </>
    )
		// 2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM, document.getElementById('test'));

	</script>
</body>
</html>